<template>
    <view class="nav_box" :style="{height:height + 'px'}">
        <view class="navbar" :style="{height: menuButtonHeight + 'px',top:menuButtonTop + 'px'}">
            <u-icon v-if="hasBack" name="arrow-left" color="#fff" size="20" @click="goBack"></u-icon>
            <text class="navname" :style="{'color': textcolor}">{{ title }}</text>
        </view>
    </view>
</template>
<script>
    export default {
        props: {
            title: {
                type: String,
                default: ""
            },
            hasBack: {
                type: Boolean,
                default: true 
            },
            textcolor: {
                type: String,
                default: '#fff' 
            }
        },
        data() {
            return {
                height: '',
                menuButtonHeight: '',
                menuButtonTop: ''
            }
        },
        created() {
            const systemInfo = wx.getSystemInfoSync();
            const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
            this.height = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + (menuButtonInfo.height + 6) +
                systemInfo
                .statusBarHeight
            this.menuButtonHeight = menuButtonInfo.height
            this.menuButtonTop = menuButtonInfo.top
        },
        methods: {
            goBack() {
                uni.navigateBack()
            }
        }
    }
</script>
<style lang="scss" scoped>
.nav_box {
    width: 100%;
    // position: fixed;
    // top: 0;
    // left: 0;
    background-color: transparent;
    //z-index: 9999;
}
.navbar {
    display: flex;
    width: 100%;
    //height: 450rpx;
    position: absolute;
    left: 0;
    z-index: 99;
    padding-left: 36rpx;
    box-sizing: border-box;
    .navname {
        margin-left: 18rpx;
        height: 58rpx;
        font-family: DingTalk JinBuTi;
        font-weight: 400;
        font-size: 48rpx;
        color: #FFFFFF;
    }
}
</style>